<template>
    
  <div>
      <!-- 菜单修改 -->
      <el-dialog title="修改菜单" :visible.sync="editDialogFormVisible" width="30%">
        <el-form :model="editForm">
           <el-form-item label="父级菜单" prop="parentId" label-width="20%">
            <el-select v-model="editForm.parentId" placeholder="请选择" style="width:70%" @change="disabledDir()">
                <el-option label="无" value=""></el-option>
                <el-option
                v-for="item in parentMenus"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="菜单名" prop="name" label-width="20%">
                <el-input v-model="editForm.name" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="组件路径" prop="componentPath" label-width="20%">
                <el-input v-model="editForm.componentPath" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="授权" prop="perms" label-width="20%">
                <el-input v-model="editForm.perms" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="菜单类型" prop="type" label-width="20%">
                <el-radio-group v-model="editForm.type">
                     <el-radio v-for="item in types" :key="item.id" :label="item.id">{{item.name}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单图标" prop="icon" label-width="20%">
                <el-select v-model="editForm.icon" placeholder="请选择">
                <el-option
                    v-for="item,index in icons"
                    :key="index"
                    :label="item"
                    :value="item">
                    <i :class="item"></i>
                </el-option>
                </el-select>
                <i :class="editForm.icon" class="demo-icon"></i>
            </el-form-item>
            <el-form-item label="菜单状态" prop="status" label-width="20%">
                <el-radio-group v-model="editForm.status">
                    <el-radio  :label="0">正常</el-radio>
                    <el-radio  :label="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateEdit()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 查询区域 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline" style="border:1px solid #DCDFE6;padding: 10px;">
        <el-form-item label="菜单名">
            <el-input v-model="queryForm.name" placeholder="请输入菜单名"></el-input>
        </el-form-item>
        <el-form-item label="类型">
            <el-select v-model="queryForm.type" placeholder="请选择菜单类型">
            <el-option label="目录" value="0">目录</el-option>
            <el-option label="菜单" value="1">菜单</el-option>
            <el-option label="按钮" value="2">按钮</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit()">查询</el-button>
        </el-form-item>
       </el-form>
       <!-- 显示区域 -->
       <el-container style="border:1px solid #DCDFE6;padding: 10px;margin-top:10px">
           <el-table
            :data="menus"
            style="width: 100%">
             <el-table-column
            label="id"
            width="180">
            <template slot-scope="scope">
                <span >{{ scope.row.id }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="父菜单"
            width="180">
            <template slot-scope="scope">
                <span v-if="scope.row.parentId === null">无</span>
                <span v-else>{{ scope.row.parentId }}</span>
            </template>
            </el-table-column>
             <el-table-column
            label="菜单名"
            width="180">
            <template slot-scope="scope">
                <span >{{ scope.row.name }}</span>
            </template>
            </el-table-column>
             <el-table-column
            label="菜单路径"
            width="180">
            <template slot-scope="scope">
                <span>{{ scope.row.componentPath }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="菜单权限"
            width="180">
            <template slot-scope="scope">
               <span>{{ scope.row.perms }}</span>
            </template>
            </el-table-column>
            <el-table-column
            label="菜单类型"
            width="180">
            <template slot-scope="scope">
                <span v-if="scope.row.type===0">目录</span>
                <span v-if="scope.row.type===1">菜单</span>
                <span v-if="scope.row.type===2">按钮</span>
            </template>
            </el-table-column>
            
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-popover
                placement="top"
                width="160"
                trigger="click"
                v-model="scope.row.visible">
                <p>您确定要删除吗？</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                </div>
                <el-button 
                style="margin-left:20px"
                slot="reference"
                size="mini"
                type="danger">删除</el-button>
                </el-popover>
            </template>
            </el-table-column>
        </el-table>
       </el-container>
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataSize">
        </el-pagination>
  </div>
</template>

<script>
import Qs from 'qs';
export default {
    data(){
        return{
            types:[{id:0,name:"目录"},{id:1,name:"菜单"},{id:2,name:"按钮"}],
            icons:["el-icon-user-solid","el-icon-user-solid"],
            parentMenus:[],
            imageUrl:'',
            icon:"",
            editDialogFormVisible: false,// 修改窗口是否可见
            visible : false,//删除窗口是否可见
            formLabelWidth:"120px",
            currentPage:1,
            dataSize:0,// 数据总数
            queryForm:{
                name:"",
                type:"",
                current:1,
                size:10
            },
            editForm:{
                parentId:"",
                name:"",
                componentPath:"",
                perms:"",
                type:"0",
                icon:"",
                status:"0"
            },
            menus:[],
            rules: {
                name: [
                    { required: true, message: '请输入菜单名', trigger: 'blur' }
                ],
                componentPath: [
                    { required: true, message: '请输入组件路径', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择菜单类型', trigger: 'change' }
                ],
                icon: [
                    { required: true, message: '请选择图标', trigger: 'change' }
                ],
                status: [
                    { required: true, message: '请选择菜单状态', trigger: 'change' }
                ]
            }
        }
    },created(){
        this.getIcons();
        this.getParentMenus();
        this.disabledDir();
        this.onSubmit();
    },
    methods:{
        //提交查询
        async onSubmit() {
            const res = await this.$http.get("/menu/listMenu",{params:this.queryForm})
            this.menus=res.data.data.records;
            this.dataSize =res.data.data.total;
        },
        // 编辑按钮
        handleEdit(index,row){
            this.editDialogFormVisible = true;
            this.editForm = Object.assign({}, row);
             //如果parentID等于空，则只能选目录
            this.disabledDir()
        },
        // 提交修改
        async updateEdit(){
            // 删除子菜单属性
            delete this.editForm.childrenMenus;
            const res = await this.$http.post("/menu/updateMenu",Qs.stringify(this.editForm))
            if(res.data.code === 200){
                 this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.editDialogFormVisible = false;
                // 刷新当前页面
                this.onSubmit();
            }else{
                 this.$message.error(res.data.msg);
            }
            

        },
        // 删除按钮
        async handleDelete(index,row){
            row.visible = false;
            // 通过删除按钮根据id删除菜单数据
            const res = await this.$http.post("/menu/deleteMenu",Qs.stringify({id:row.id}))
            if(res.data.code === 200){
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
                this.onSubmit();
            }else{
                this.$message.error(res.data.msg);
            }
            
        },
        // 每叶总数改变
        handleSizeChange(val) {
             this.queryForm.size  = val;
             this.onSubmit();
        },
        //当前页
        handleCurrentChange(val) {
            this.queryForm.current = val;
            this.onSubmit();
        },
        //父级目录为无时，只能选择
        disabledDir(){
            if(this.editForm.parentId === "" || this.editForm.parentId === null){
                this.types = [{id:0,name:"目录"}];
            }else{
                this.types = [{id:1,name:"菜单"},{id:2,name:"按钮"}];
            }
        },
        // 获取目录列表
        async getParentMenus(){
            const res = await this.$http.get("/menu/getDirections")
            this.parentMenus=res.data.data;
        },
        //获取图标列表
        async getIcons(){
            const res = await this.$http.get("/menu/getIcons")
            this.icons=res.data.data;
        },
        
    }
}
</script>

<style>
  .demo-icon{
    width: 50px;
    height: 50px;
    align-content: center;
    margin-left: 20px;
    margin-top: 10px;
    font-size: 25px;
  }
</style>